<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级登录系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#818CF8',
                        dark: '#111827',
                        light: '#F9FAFB',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
                        'input': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
                        'btn': '0 4px 6px -1px rgba(79, 70, 229, 0.4), 0 2px 4px -1px rgba(79, 70, 229, 0.3)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(8px);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scale-hover {
                transition: transform 0.2s ease-in-out;
            }
            .scale-hover:hover {
                transform: scale(1.02);
            }
            .rotate-icon {
                transition: transform 0.3s ease;
            }
            .rotate-icon.active {
                transform: rotate(180deg);
            }
            .input-focus {
                transition: all 0.2s ease;
            }
            .input-focus:focus {
                border-color: #4F46E5;
                box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
            }
            .form-shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translateX(-1px); }
                20%, 80% { transform: translateX(2px); }
                30%, 50%, 70% { transform: translateX(-4px); }
                40%, 60% { transform: translateX(4px); }
            }
            .slide-up {
                animation: slideUp 0.5s ease-out;
            }
            @keyframes slideUp {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .pulse-subtle {
                animation: pulseSubtle 2s infinite;
            }
            @keyframes pulseSubtle {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.7; }
            }
        }
    </style>
    
    <!-- 加载Inter字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-inter bg-light text-dark min-h-screen transition-colors duration-300">
    <!-- 深色模式切换 -->
    <button id="theme-toggle" class="fixed top-5 right-5 z-50 p-2 rounded-full bg-primary text-white shadow-lg transition-custom">
        <i class="fa fa-moon-o"></i>
    </button>
    
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden -z-10">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute top-1/2 -left-40 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 right-1/3 w-80 h-80 bg-primary/5 rounded-full blur-3xl"></div>
    </div>
    
    <!-- 主容器 -->
    <div class="container mx-auto px-4 py-12 md:py-20 flex flex-col md:flex-row items-center justify-center gap-8">
        <!-- 左侧品牌信息 -->
        <div class="hidden md:flex md:w-1/2 flex-col items-start space-y-6 slide-up" style="animation-delay: 0.2s">
            <div class="flex items-center space-x-3">
                <div class="w-12 h-12 rounded-lg bg-gradient-primary flex items-center justify-center shadow-lg">
                    <i class="fa fa-lock text-white text-2xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-dark">SecurePortal</h1>
            </div>
            
            <div class="space-y-4">
                <h2 class="text-[clamp(2rem,5vw,3rem)] font-bold leading-tight text-dark">
                    安全、便捷的<br/>账户管理中心
                </h2>
                <p class="text-gray-600 text-lg max-w-md">
                    我们提供最先进的身份验证系统，保障您的账户安全，同时提供流畅的用户体验。
                </p>
            </div>
            
            <div class="flex flex-wrap gap-3">
                <div class="flex items-center space-x-2 text-gray-700">
                    <i class="fa fa-shield text-primary"></i>
                    <span>银行级安全加密</span>
                </div>
                <div class="flex items-center space-x-2 text-gray-700">
                    <i class="fa fa-bolt text-primary"></i>
                    <span>快速登录体验</span>
                </div>
                <div class="flex items-center space-x-2 text-gray-700">
                    <i class="fa fa-mobile text-primary"></i>
                    <span>多设备支持</span>
                </div>
            </div>
            
            <div class="mt-8 relative">
                <div class="w-64 h-64 rounded-2xl overflow-hidden shadow-xl">
                    <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="安全登录" class="w-full h-full object-cover">
                </div>
                <div class="absolute -bottom-4 -right-4 w-32 h-32 rounded-2xl overflow-hidden shadow-lg">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="数字安全" class="w-full h-full object-cover">
                </div>
            </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="w-full md:w-1/3 max-w-md slide-up" style="animation-delay: 0.4s">
            <div class="bg-white rounded-2xl shadow-card p-8 scale-hover">
                <!-- 登录选项卡 -->
                <div class="flex mb-8 border-b">
                    <button id="login-tab" class="flex-1 py-3 text-center font-medium text-primary border-b-2 border-primary">账号登录</button>
                    <button id="phone-tab" class="flex-1 py-3 text-center font-medium text-gray-500">手机登录</button>
                </div>
                
                <!-- 账号登录表单 -->
                <form id="login-form" class="space-y-6">
                    <!-- 用户名/邮箱 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-gray-700">用户名或邮箱</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-user text-gray-400"></i>
                            </div>
                            <input type="text" id="username" name="username" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入用户名或邮箱" required>
                            <div id="username-error" class="hidden mt-1 text-sm text-danger"></div>
                        </div>
                    </div>
                    
                    <!-- 密码 -->
                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <a href="#" id="forgot-password" class="text-sm text-primary hover:text-secondary transition-colors">忘记密码？</a>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-gray-400"></i>
                            </div>
                            <input type="password" id="password" name="password" class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入密码" required>
                            <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                            <div id="password-error" class="hidden mt-1 text-sm text-danger"></div>
                        </div>
                    </div>
                    
                    <!-- 验证码 -->
                    <div class="space-y-2">
                        <label for="captcha" class="block text-sm font-medium text-gray-700">验证码</label>
                        <div class="flex space-x-3">
                            <div class="relative flex-1">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-shield text-gray-400"></i>
                                </div>
                                <input type="text" id="captcha" name="captcha" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入验证码" required>
                            </div>
                            <div id="captcha-image" class="w-32 h-12 bg-gray-100 rounded-lg flex items-center justify-center text-gray-500 font-mono cursor-pointer select-none">
                                <!-- 验证码图片将由JS生成 -->
                                <span class="pulse-subtle">点击刷新</span>
                            </div>
                        </div>
                        <div id="captcha-error" class="hidden mt-1 text-sm text-danger"></div>
                    </div>
                    
                    <!-- 记住我 -->
                    <div class="flex items-center">
                        <input type="checkbox" id="remember-me" name="remember-me" class="h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我 30天</label>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" id="login-button" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-btn transition-custom flex items-center justify-center space-x-2">
                        <span>安全登录</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>
                    
                    <!-- 分隔线 -->
                    <div class="relative">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-200"></div>
                        </div>
                        <div class="relative flex justify-center text-sm">
                            <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                        </div>
                    </div>
                    
                    <!-- 社交媒体登录 -->
                    <div class="grid grid-cols-4 gap-3">
                        <button type="button" class="flex justify-center items-center h-12 w-full border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-custom">
                            <i class="fa fa-weixin text-green-600 text-xl"></i>
                        </button>
                        <button type="button" class="flex justify-center items-center h-12 w-full border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-custom">
                            <i class="fa fa-qq text-blue-500 text-xl"></i>
                        </button>
                        <button type="button" class="flex justify-center items-center h-12 w-full border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-custom">
                            <i class="fa fa-weibo text-red-500 text-xl"></i>
                        </button>
                        <button type="button" class="flex justify-center items-center h-12 w-full border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-custom">
                            <i class="fa fa-github text-gray-800 text-xl"></i>
                        </button>
                    </div>
                    
                    <!-- 注册账号 -->
                    <div class="text-center">
                        <span class="text-gray-600 text-sm">还没有账号？</span>
                        <a href="#" id="register-link" class="text-sm text-primary hover:text-secondary font-medium transition-colors">立即注册</a>
                    </div>
                </form>
                
                <!-- 手机登录表单 (默认隐藏) -->
                <form id="phone-form" class="space-y-6 hidden">
                    <!-- 手机号 -->
                    <div class="space-y-2">
                        <label for="phone" class="block text-sm font-medium text-gray-700">手机号码</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fa fa-mobile text-gray-400"></i>
                            </div>
                            <input type="tel" id="phone" name="phone" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入手机号码" required>
                            <div id="phone-error" class="hidden mt-1 text-sm text-danger"></div>
                        </div>
                    </div>
                    
                    <!-- 短信验证码 -->
                    <div class="space-y-2">
                        <label for="sms-code" class="block text-sm font-medium text-gray-700">短信验证码</label>
                        <div class="flex space-x-3">
                            <div class="relative flex-1">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-key text-gray-400"></i>
                                </div>
                                <input type="text" id="sms-code" name="sms-code" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入验证码" required>
                            </div>
                            <button type="button" id="send-code" class="w-32 bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-2 px-4 rounded-lg transition-custom whitespace-nowrap">
                                获取验证码
                            </button>
                        </div>
                        <div id="sms-error" class="hidden mt-1 text-sm text-danger"></div>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" id="phone-login-button" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-btn transition-custom flex items-center justify-center space-x-2">
                        <span>短信登录</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>
                </form>
            </div>
            
            <!-- 安全提示 -->
            <div class="mt-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div class="flex items-start space-x-3">
                    <i class="fa fa-info-circle text-primary mt-0.5"></i>
                    <div>
                        <p class="text-sm text-gray-700 font-medium">安全提示</p>
                        <ul class="text-xs text-gray-600 mt-1 space-y-1">
                            <li>• 请确保您在安全的网络环境下登录</li>
                            <li>• 不要在公共设备上勾选"记住我"选项</li>
                            <li>• 如遇异常登录，请立即修改密码</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 忘记密码模态框 (默认隐藏) -->
    <div id="forgot-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-2xl shadow-xl p-8 max-w-md w-full mx-4 scale-hover">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-dark">找回密码</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <form id="forgot-form" class="space-y-6">
                <div class="space-y-2">
                    <label for="forgot-email" class="block text-sm font-medium text-gray-700">请输入注册邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-envelope text-gray-400"></i>
                        </div>
                        <input type="email" id="forgot-email" name="forgot-email" class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入邮箱地址" required>
                    </div>
                </div>
                
                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-btn transition-custom">
                    发送重置链接
                </button>
            </form>
        </div>
    </div>
    
    <!-- 注册模态框 (默认隐藏) -->
    <div id="register-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-2xl shadow-xl p-8 max-w-md w-full mx-4 scale-hover">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-dark">创建账号</h3>
                <button id="close-register-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <form id="register-form" class="space-y-6">
                <div class="space-y-2">
                    <label for="register-username" class="block text-sm font-medium text-gray-700">用户名</label>
                    <input type="text" id="register-username" name="register-username" class="w-full pl-4 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请设置用户名" required>
                </div>
                
                <div class="space-y-2">
                    <label for="register-email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input type="email" id="register-email" name="register-email" class="w-full pl-4 pr-4 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请输入邮箱地址" required>
                </div>
                
                <div class="space-y-2">
                    <label for="register-password" class="block text-sm font-medium text-gray-700">密码</label>
                    <div class="relative">
                        <input type="password" id="register-password" name="register-password" class="w-full pl-4 pr-10 py-3 border border-gray-300 rounded-lg shadow-input input-focus" placeholder="请设置密码" required>
                        <button type="button" id="toggle-register-password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                            <i class="fa fa-eye-slash"></i>
                        </button>
                    </div>
                    <p class="text-xs text-gray-500">密码长度8-20位，包含字母和数字</p>
                </div>
                
                <div class="flex items-start">
                    <input type="checkbox" id="agree-terms" name="agree-terms" class="h-4 w-4 mt-1 text-primary border-gray-300 rounded focus:ring-primary" required>
                    <label for="agree-terms" class="ml-2 block text-sm text-gray-700">
                        我已阅读并同意<a href="#" class="text-primary hover:text-secondary">服务条款</a>和<a href="#" class="text-primary hover:text-secondary">隐私政策</a>
                    </label>
                </div>
                
                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg shadow-btn transition-custom">
                    注册账号
                </button>
            </form>
        </div>
    </div>
    
    <!-- 成功提示模态框 (默认隐藏) -->
    <div id="success-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-2xl shadow-xl p-8 max-w-md w-full mx-4 text-center scale-hover">
            <div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fa fa-check text-2xl text-success"></i>
            </div>
            <h3 class="text-xl font-bold text-dark mb-2">操作成功</h3>
            <p id="success-message" class="text-gray-600 mb-6">您的请求已处理成功。</p>
            <button id="close-success-modal" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-btn transition-custom">
                确定
            </button>
        </div>
    </div>
    
    <!-- 页面脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 深色模式切换
            const themeToggle = document.getElementById('theme-toggle');
            const themeIcon = themeToggle.querySelector('i');
            const html = document.documentElement;
            
            // 检查本地存储的主题偏好
            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                html.classList.add('dark');
                themeIcon.classList.remove('fa-moon-o');
                themeIcon.classList.add('fa-sun-o');
            } else {
                html.classList.remove('dark');
                themeIcon.classList.remove('fa-sun-o');
                themeIcon.classList.add('fa-moon-o');
            }
            
            themeToggle.addEventListener('click', function() {
                if (html.classList.contains('dark')) {
                    html.classList.remove('dark');
                    localStorage.theme = 'light';
                    themeIcon.classList.remove('fa-sun-o');
                    themeIcon.classList.add('fa-moon-o');
                } else {
                    html.classList.add('dark');
                    localStorage.theme = 'dark';
                    themeIcon.classList.remove('fa-moon-o');
                    themeIcon.classList.add('fa-sun-o');
                }
            });
            
            // 登录表单切换
            const loginTab = document.getElementById('login-tab');
            const phoneTab = document.getElementById('phone-tab');
            const loginForm = document.getElementById('login-form');
            const phoneForm = document.getElementById('phone-form');
            
            loginTab.addEventListener('click', function() {
                loginTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                loginTab.classList.remove('text-gray-500');
                phoneTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                phoneTab.classList.add('text-gray-500');
                loginForm.classList.remove('hidden');
                phoneForm.classList.add('hidden');
            });
            
            phoneTab.addEventListener('click', function() {
                phoneTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                phoneTab.classList.remove('text-gray-500');
                loginTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                loginTab.classList.add('text-gray-500');
                phoneForm.classList.remove('hidden');
                loginForm.classList.add('hidden');
            });
            
            // 密码可见性切换
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                const icon = togglePassword.querySelector('i');
                if (type === 'password') {
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
            
            // 注册密码可见性切换
            const toggleRegisterPassword = document.getElementById('toggle-register-password');
            const registerPasswordInput = document.getElementById('register-password');
            
            if (toggleRegisterPassword && registerPasswordInput) {
                toggleRegisterPassword.addEventListener('click', function() {
                    const type = registerPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    registerPasswordInput.setAttribute('type', type);
                    
                    // 切换图标
                    const icon = toggleRegisterPassword.querySelector('i');
                    if (type === 'password') {
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                });
            }
            
            // 验证码生成
            const captchaImage = document.getElementById('captcha-image');
            
            function generateCaptcha() {
                const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                let captcha = '';
                for (let i = 0; i < 4; i++) {
                    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                
                // 清空之前的内容
                captchaImage.innerHTML = '';
                
                // 创建画布
                const canvas = document.createElement('canvas');
                canvas.width = 120;
                canvas.height = 40;
                const ctx = canvas.getContext('2d');
                
                // 背景
                ctx.fillStyle = '#f3f4f6';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 添加干扰线
                for (let i = 0; i < 5; i++) {
                    ctx.strokeStyle = `rgba(${Math.random() * 100 + 50}, ${Math.random() * 100 + 50}, ${Math.random() * 100 + 100}, 0.5)`;
                    ctx.beginPath();
                    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
                    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
                    ctx.lineWidth = Math.random() * 2 + 1;
                    ctx.stroke();
                }
                
                // 添加干扰点
                for (let i = 0; i < 30; i++) {
                    ctx.fillStyle = `rgba(${Math.random() * 100 + 50}, ${Math.random() * 100 + 50}, ${Math.random() * 100 + 100}, 0.5)`;
                    ctx.beginPath();
                    ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 2, 0, 2 * Math.PI);
                    ctx.fill();
                }
                
                // 添加文本
                ctx.font = 'bold 24px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                
                // 每个字符不同颜色和旋转角度
                for (let i = 0; i < captcha.length; i++) {
                    ctx.fillStyle = `rgba(${Math.random() * 100 + 50}, ${Math.random() * 100 + 50}, ${Math.random() * 100 + 100}, 0.8)`;
                    ctx.save();
                    ctx.translate(30 + i * 20, 20);
                    ctx.rotate((Math.random() - 0.5) * 0.4);
                    ctx.fillText(captcha[i], 0, 0);
                    ctx.restore();
                }
                
                captchaImage.appendChild(canvas);
                captchaImage.dataset.captcha = captcha;
            }
            
            captchaImage.addEventListener('click', generateCaptcha);
            
            // 初始生成验证码
            generateCaptcha();
            
            // 表单验证
            const loginButton = document.getElementById('login-button');
            const usernameInput = document.getElementById('username');
            const usernameError = document.getElementById('username-error');
            const passwordError = document.getElementById('password-error');
            const captchaInput = document.getElementById('captcha');
            const captchaError = document.getElementById('captcha-error');
            
            function validateEmail(email) {
                const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(String(email).toLowerCase());
            }
            
            usernameInput.addEventListener('input', function() {
                usernameError.classList.add('hidden');
            });
            
            passwordInput.addEventListener('input', function() {
                passwordError.classList.add('hidden');
            });
            
            captchaInput.addEventListener('input', function() {
                captchaError.classList.add('hidden');
            });
            
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 验证用户名/邮箱
                const username = usernameInput.value.trim();
                if (!username) {
                    usernameError.textContent = '请输入用户名或邮箱';
                    usernameError.classList.remove('hidden');
                    isValid = false;
                } else if (!validateEmail(username) && username.length < 3) {
                    usernameError.textContent = '用户名至少需要3个字符或请输入有效的邮箱地址';
                    usernameError.classList.remove('hidden');
                    isValid = false;
                }
                
                // 验证密码
                const password = passwordInput.value;
                if (!password) {
                    passwordError.textContent = '请输入密码';
                    passwordError.classList.remove('hidden');
                    isValid = false;
                } else if (password.length < 6) {
                    passwordError.textContent = '密码长度至少需要6个字符';
                    passwordError.classList.remove('hidden');
                    isValid = false;
                }
                
                // 验证验证码
                const captcha = captchaInput.value.toUpperCase();
                if (!captcha) {
                    captchaError.textContent = '请输入验证码';
                    captchaError.classList.remove('hidden');
                    isValid = false;
                } else if (captcha !== captchaImage.dataset.captcha) {
                    captchaError.textContent = '验证码不正确';
                    captchaError.classList.remove('hidden');
                    isValid = false;
                    // 重新生成验证码
                    generateCaptcha();
                }
                
                // 如果验证失败，添加抖动效果
                if (!isValid) {
                    loginForm.classList.add('form-shake');
                    setTimeout(() => {
                        loginForm.classList.remove('form-shake');
                    }, 500);
                    return;
                }
                
                // 记住我功能
                const rememberMe = document.getElementById('remember-me').checked;
                if (rememberMe) {
                    // 在实际应用中，这里应该设置安全的cookie或localStorage
                    localStorage.setItem('rememberedUsername', username);
                } else {
                    localStorage.removeItem('rememberedUsername');
                }
                
                // 显示成功提示
                showSuccessModal('登录成功，正在跳转...');
                
                // 模拟登录请求
                setTimeout(() => {
                    // 在实际应用中，这里应该发送AJAX请求到服务器
                    console.log('登录成功', { username, password, rememberMe });
                    // 登录成功后跳转到首页或其他页面
                    // window.location.href = '/dashboard';
                }, 1500);
            });
            
            // 尝试填充记住的用户名
            window.addEventListener('load', function() {
                const rememberedUsername = localStorage.getItem('rememberedUsername');
                if (rememberedUsername) {
                    usernameInput.value = rememberedUsername;
                    document.getElementById('remember-me').checked = true;
                }
            });
            
            // 手机登录表单
            const phoneLoginButton = document.getElementById('phone-login-button');
            const phoneInput = document.getElementById('phone');
            const phoneError = document.getElementById('phone-error');
            const smsCodeInput = document.getElementById('sms-code');
            const smsError = document.getElementById('sms-error');
            const sendCodeButton = document.getElementById('send-code');
            
            function validatePhone(phone) {
                const re = /^1[3-9]\d{9}$/;
                return re.test(String(phone));
            }
            
            phoneInput.addEventListener('input', function() {
                phoneError.classList.add('hidden');
            });
            
            smsCodeInput.addEventListener('input', function() {
                smsError.classList.add('hidden');
            });
            
            // 发送验证码
            sendCodeButton.addEventListener('click', function() {
                const phone = phoneInput.value.trim();
                if (!validatePhone(phone)) {
                    phoneError.textContent = '请输入有效的手机号码';
                    phoneError.classList.remove('hidden');
                    return;
                }
                
                // 倒计时
                let countdown = 60;
                sendCodeButton.disabled = true;
                sendCodeButton.classList.add('bg-gray-100', 'text-gray-400', 'border-gray-200');
                sendCodeButton.classList.remove('bg-white', 'text-primary', 'border-primary', 'hover:bg-primary/5');
                
                const timer = setInterval(() => {
                    countdown--;
                    sendCodeButton.textContent = `${countdown}秒后重发`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        sendCodeButton.disabled = false;
                        sendCodeButton.textContent = '获取验证码';
                        sendCodeButton.classList.remove('bg-gray-100', 'text-gray-400', 'border-gray-200');
                        sendCodeButton.classList.add('bg-white', 'text-primary', 'border-primary', 'hover:bg-primary/5');
                    }
                }, 1000);
                
                // 显示成功提示
                showSuccessModal('验证码已发送，请注意查收');
                
                // 模拟发送请求
                console.log('发送验证码到手机:', phone);
            });
            
            phoneForm.addEventListener('submit', function(e) {
                e.preventDefault();
                let isValid = true;
                
                // 验证手机号
                const phone = phoneInput.value.trim();
                if (!validatePhone(phone)) {
                    phoneError.textContent = '请输入有效的手机号码';
                    phoneError.classList.remove('hidden');
                    isValid = false;
                }
                
                // 验证短信验证码
                const smsCode = smsCodeInput.value.trim();
                if (!smsCode) {
                    smsError.textContent = '请输入短信验证码';
                    smsError.classList.remove('hidden');
                    isValid = false;
                } else if (smsCode.length !== 6 || !/^\d+$/.test(smsCode)) {
                    smsError.textContent = '请输入6位数字验证码';
                    smsError.classList.remove('hidden');
                    isValid = false;
                }
                
                // 如果验证失败，添加抖动效果
                if (!isValid) {
                    phoneForm.classList.add('form-shake');
                    setTimeout(() => {
                        phoneForm.classList.remove('form-shake');
                    }, 500);
                    return;
                }
                
                // 显示成功提示
                showSuccessModal('登录成功，正在跳转...');
                
                // 模拟登录请求
                setTimeout(() => {
                    // 在实际应用中，这里应该发送AJAX请求到服务器
                    console.log('手机登录成功', { phone, smsCode });
                    // 登录成功后跳转到首页或其他页面
                    // window.location.href = '/dashboard';
                }, 1500);
            });
            
            // 模态框控制
            const forgotPasswordLink = document.getElementById('forgot-password');
            const forgotModal = document.getElementById('forgot-modal');
            const closeModal = document.getElementById('close-modal');
            const forgotForm = document.getElementById('forgot-form');
            
            const registerLink = document.getElementById('register-link');
            const registerModal = document.getElementById('register-modal');
            const closeRegisterModal = document.getElementById('close-register-modal');
            const registerForm = document.getElementById('register-form');
            
            const successModal = document.getElementById('success-modal');
            const successMessage = document.getElementById('success-message');
            const closeSuccessModal = document.getElementById('close-success-modal');
            
            function showSuccessModal(message) {
                successMessage.textContent = message;
                successModal.classList.remove('hidden');
                successModal.classList.add('flex');
            }
            
            forgotPasswordLink.addEventListener('click', function(e) {
                e.preventDefault();
                forgotModal.classList.remove('hidden');
                forgotModal.classList.add('flex');
            });
            
            closeModal.addEventListener('click', function() {
                forgotModal.classList.add('hidden');
                forgotModal.classList.remove('flex');
            });
            
            registerLink.addEventListener('click', function(e) {
                e.preventDefault();
                registerModal.classList.remove('hidden');
                registerModal.classList.add('flex');
            });
            
            closeRegisterModal.addEventListener('click', function() {
                registerModal.classList.add('hidden');
                registerModal.classList.remove('flex');
            });
            
            closeSuccessModal.addEventListener('click', function() {
                successModal.classList.add('hidden');
                successModal.classList.remove('flex');
            });
            
            // 点击模态框背景关闭
            forgotModal.addEventListener('click', function(e) {
                if (e.target === forgotModal) {
                    forgotModal.classList.add('hidden');
                    forgotModal.classList.remove('flex');
                }
            });
            
            registerModal.addEventListener('click', function(e) {
                if (e.target === registerModal) {
                    registerModal.classList.add('hidden');
                    registerModal.classList.remove('flex');
                }
            });
            
            successModal.addEventListener('click', function(e) {
                if (e.target === successModal) {
                    successModal.classList.add('hidden');
                    successModal.classList.remove('flex');
                }
            });
            
            // 忘记密码表单提交
            forgotForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const forgotEmail = document.getElementById('forgot-email').value.trim();
                
                if (!validateEmail(forgotEmail)) {
                    showSuccessModal('请输入有效的邮箱地址');
                    return;
                }
                
                // 关闭模态框
                forgotModal.classList.add('hidden');
                forgotModal.classList.remove('flex');
                
                // 显示成功提示
                showSuccessModal('重置密码链接已发送到您的邮箱，请查收');
                
                // 模拟发送请求
                console.log('发送重置密码链接到邮箱:', forgotEmail);
            });
            
            // 注册表单提交
            registerForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const registerUsername = document.getElementById('register-username').value.trim();
                const registerEmail = document.getElementById('register-email').value.trim();
                const registerPassword = document.getElementById('register-password').value;
                const agreeTerms = document.getElementById('agree-terms').checked;
                
                // 简单验证
                if (!registerUsername || registerUsername.length < 3) {
                    showSuccessModal('用户名至少需要3个字符');
                    return;
                }
                
                if (!validateEmail(registerEmail)) {
                    showSuccessModal('请输入有效的邮箱地址');
                    return;
                }
                
                if (!registerPassword || registerPassword.length < 8 || !/[a-zA-Z]/.test(registerPassword) || !/[0-9]/.test(registerPassword)) {
                    showSuccessModal('密码长度8-20位，必须包含字母和数字');
                    return;
                }
                
                if (!agreeTerms) {
                    showSuccessModal('请阅读并同意服务条款和隐私政策');
                    return;
                }
                
                // 关闭模态框
                registerModal.classList.add('hidden');
                registerModal.classList.remove('flex');
                
                // 显示成功提示
                showSuccessModal('注册成功，请登录');
                
                // 模拟注册请求
                console.log('注册账号:', { registerUsername, registerEmail, registerPassword });
            });
            
            // 社交媒体登录按钮
            const socialButtons = document.querySelectorAll('button[type="button"]:not(#toggle-password):not(#send-code):not(#toggle-register-password):not(#close-modal):not(#close-register-modal):not(#close-success-modal):not(#theme-toggle)');
            
            socialButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const platform = this.querySelector('i').classList.contains('fa-weixin') ? '微信' :
                                     this.querySelector('i').classList.contains('fa-qq') ? 'QQ' :
                                     this.querySelector('i').classList.contains('fa-weibo') ? '微博' : 'GitHub';
                    
                    showSuccessModal(`正在跳转到${platform}授权页面...`);
                    
                    // 模拟第三方登录请求
                    setTimeout(() => {
                        console.log(`使用${platform}登录`);
                    }, 1000);
                });
            });
        });
    </script>
</body>
</html>